<template>
	<div>
		<van-nav-bar title="确认订单" :fixed=true left-arrow @click-left="onClickLeft" />
		<div class="prolist">
			<img :src="list.pimg" alt="">
			<div>
				<span class="desc">{{list.pdesc}}</span>
				<p>已选:{{like}}</p>
				<p class="price">¥{{list.pprice}}</p>
				<em>¥{{parseInt(list.pprice*0.69)}}</em>
			</div>
		</div>
		<van-cell icon="location-o" class="address" title="添加地址" is-link to="address" />
    <ul class="gou">
      <li> <p>购买数量</p><van-stepper v-model="value" integer /></li>
      <li><p>配送方式</p><p>快递 免邮</p></li>
      <li><span class="he">共1件，合计：</span><span class="red">￥{{list.pprice}}</span></li>
    </ul>
    <div class="footer">
      <p class="ji">合计金额：<span>￥{{list.pprice*value}}</span></p>
      <van-button type="primary" @click="showPopup"  >提交订单</van-button>
      <van-popup
        v-model="show"
        closeable
        close-icon-position="top-left"
        position="bottom"
        :style="{ height: '56%' }"
      >
      <p class="zifu">请输入支付密码</p>
      <van-password-input
        :value="val"
        :length="6"
        :gutter="0"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      />

      <!-- 数字键盘 -->
      <van-number-keyboard
        :show="showKeyboard"
        @input="onInput"
        @delete="onDelete"
        @blur="showKeyboard = false"
      />
      </van-popup>


    </div>

	</div>
</template>

<script>
	import * as api from '../api/getProlist.js'
	export default {
		name: 'Order1',
		data() {
			return {
				list: '',
				num: 100000,
				like: '默认待选',
        value:'1',
        val:'',
        showKeyboard:true,
        show:false,
        num:0,
			}
		},
		methods: {
			onClickLeft() {
				this.$router.go(-1)
			},
      showPopup(){
        this.num=1
        console.log(this.num)
        localStorage.getItem('num',this.num)
        if(!localStorage.getItem('tel')){
          this.$toast.fail('请添加收货地址')
          console.log('222')
        }else{
          this.show=true
        }
        // this.show=true
      },
      onInput(key) {
        this.val = (this.val + key).slice(0, 6);
        if(this.val.length==6){
          this.$toast('支付成功')
          this.show=false
          this.$router.push('/paysuccess')
        }
      },
      onDelete() {
        this.val = this.val.slice(0, this.val.length - 1);
      }
		},
		mounted() {
			api.getDetail({
				id: localStorage.getItem('proid')
			}).then((data) => {
				this.list = data.data.data
			})
		}
	}
</script>

<style scoped="">
  .van-icon-arrow-left{
    color: #bfbfbf;
    font-size: 24px;
  }
  .van-nav-bar__title{
    font-size: 20px;
    /* font-weight: 600; */
  }
	.prolist {
		border-bottom: 10px solid rgba(0, 0, 0, .1);
		display: flex;
		padding: 10px;
	}

	.prolist img {
		width: 100px;
		height: 100px;
		border-radius: 10px;
		margin-right: 10px;
	}

	.price {
		display: inline-block;
		margin-right: 10px;
		color: #FF0036;
	}
	em{
		text-decoration: line-through;
	}
	.address{
		border-bottom: 10px solid rgba(0, 0, 0, .1);
	}
  .desc{
    font-size: 16px;
  }
  .gou{
    display: flex;
    flex-direction: column;
    padding: 0 20px;
  }
  .gou li{
    display: flex;
    justify-content: space-between;
    height: 60px;
    border-bottom: 1px solid #BFBFBF;
    align-items: center;
    font-size: 14px;
  }
  .he{
    margin-left: 180px;
  }
  .red{
    color: red;
  }
  .footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .footer button{
    width: 170px;
    height: 60px;
    background: #F3CB0A;
    border-color:#F3CB0A;
    color: #000000;
    margin-left: 54px;
  }
  .ji{
    padding-left: 10px;
    display: flex;
    width: 140px;
    font-size: 16px;
    height: 60px;
    line-height: 60px;
  }
  .ji span{
    font-size: 20px;
    color: red;
    font-weight: 600;
  }
  .van-password-input__security li{
    border: 1px solid #C8C8C8;
  }
  .van-password-input__security{
    margin-top: 30px;
  }
  .zifu{
    text-align: center;
    font-size: 16px;
  }
</style>
